<template>
  <section class="talk-wrapper">
    <home-title :data="talkData"></home-title>
    <ul class="item">
      <li v-for="i in talkList" :key="i.id" class="list">
        <h4 class="title">{{ i.title }}</h4>
        <div class="intro">
          {{ i.intro }}
        </div>
        <div class="show">
          <nuxt-link :to="i.to">点击查看</nuxt-link>
        </div>
      </li>
    </ul>
  </section>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      talkData: {
        title: '热门话题',
        src: 'remen.png'
      },
      talkList: [
        {
          title: '程序员如何洗头',
          intro:
            '不知道这个耿的不是一个合格的程序员,等秃顶了就可以节约洗发水的钱了',
          src: '',
          to: ''
        },
        {
          title: '如何更优雅的撸宠',
          intro: '看看你家的宠物是啥样？它们叫什么呢？',
          src: '',
          to: ''
        },
        {
          title: '程序员如何洗头',
          intro:
            '不知道这个耿的不是一个合格的程序员,等秃顶了就可以节约洗发水的钱了',
          src: '',
          to: ''
        },
        {
          title: '如何更优雅的撸宠',
          intro: '看看你家的宠物是啥样？它们叫什么呢？',
          src: '',
          to: ''
        },
        {
          title: '程序员如何洗头',
          intro:
            '不知道这个耿的不是一个合格的程序员,等秃顶了就可以节约洗发水的钱了',
          src: '',
          to: ''
        },
        {
          title: '如何更优雅的撸宠',
          intro: '看看你家的宠物是啥样？它们叫什么呢？',
          src: '',
          to: ''
        }
      ]
    }
  }
})
</script>

<style scoped lang="scss">
.talk-wrapper {
  width: 100%;
  padding: 20px 40px;
  background-color: #fff;
  .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .list {
      padding: 10px;
      flex: 0 0 16%;
      overflow: hidden;
      border-right: 1px solid #eee;
      &:last-child{
        border-right: none;
      }
      &:hover {
        background: linear-gradient(0deg, rgb(223, 215, 215) 0%, #fff 100%);
      }
      .show {
        text-align: right;
      }
      .title {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .intro {
        margin-top: 5px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .show {
        margin-top: 5px;
      }
    }
  }
}
</style>
